<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>帖子管理</legend>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">帖子标题:</label>
                <div class="layui-input-inline">
                    <input type="text" name="infoTitle" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="infoDoSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
            </div>
        </div>
    </form>
    <div class="layui-btn-group demoTable">
        <button class="layui-btn" data-type="refresh" id="infoAllRefresh">刷新</button>
    </div>
    <table class="layui-hide" id="infoTables" lay-filter="infoTables"></table>
    <div style="display: none" id="infobarDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </div>
</div>
<script>
    layui.use(['table', 'util', 'config', 'form'], function () {
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;
        var form = layui.form;

        function get_infoType(infoType) {
            return ['发布领养', '我想领养', '寻宠启示', '宠物二三事'][infoType]
        }

        table.render({
            elem: '#infoTables',
            id: "info"
            , url: config.base_server + 'getInfoList'
            , cols: [[
                { field: 'infoId', title: '帖子编号', sort: true, minWidth: 20 }
                , { field: 'infoTitle', title: '帖子标题', minWidth: 100 }
                , { field: 'infoComm', title: '帖子内容', minWidth: 100 }
                , { field: 'infoTime', title: '发布时间', minWidth: 50 }
                , {
                    field: 'infoType', title: '帖子类别', minWidth: 50, templet: function (d) {
                        return get_infoType(d.infoType)
                    }
                }
                , { field: 'infoAddress', title: '发布地址', minWidth: 50 }
                , {
                    field: 'infoImgList', title: '帖子图片', minWidth: 100, templet: function (d) { return '<div ><img src=' + d.infoImgList[0] + ' style="width: 50px;"></div>' }
                }
                , { title: '操作', toolbar: '#infobarDemo', width: "20%" }
            ]]
            , page: true //开启分页
            , skin: 'row' //行边框风格
            , even: true //开启隔行背景
            , size: 'lg' //小尺寸的表格
        });

        table.on('tool(infoTables)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                var editId = data.infoId;
                layer.confirm('真的删除该帖子吗?', function (index) {
                    $.ajax({
                        type: "POST",
                        url: config.base_server + "deleteinfoById",
                        data: { infoId: editId },
                        dataType: "json",
                        success: (data) => {
                            if (data.code) {
                                obj.del();
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                layer.close(index);
                            } else {
                                alert(data.info);
                            }
                        }
                    });
                });
            } else if (obj.event === 'detail') {
                var editId = data.infoId;
                var fu = layer.open({
                    type: 2,
                    title: "查看" + editId + "号帖子",
                    area: ['600px', '800px'],
                    fix: false,
                    content: 'components/system/infoDetailTable.html?editNo=' + editId,
                    maxmin: true,
                    end: function () {
                        table.reload('info');
                    }
                });
            }
        });

        $('#infoAllRefresh').on('click', function () {
            location.reload();
        });

        $('#infoDoSearch').on('click', function () {
            var infoTitle = $("input[name='infoTitle']").val();
            table.reload('info', {
                url: config.base_server + 'getinfoList'
                , where: { infoTitle: infoTitle }
            });
        });

        $('#doReset').on('click', function () {
            location.reload();
        });
    });

</script>